<template>
    <a-locale-provider :locale="zh_CN">
        <a-layout id="app">
            <a-layout-sider :trigger="null">
                <div class="logo"/>
                <a-menu v-model="currentRoute" theme="dark" mode="inline" @click="onMenuItemClick">
                    <a-menu-item key="Home">
                        <a-icon type="home" theme="filled"/>首页
                    </a-menu-item>
                    <a-sub-menu key="user">
                        <span slot="title">
                            <a-icon type="idcard" theme="filled"/>客户管理
                        </span>
                        <a-menu-item key="AddUser">
                            <a-icon type="plus-circle"/>添加客户
                        </a-menu-item>
                        <a-menu-item key="UserList">
                            <a-icon type="profile"/>客户列表
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="order">
                        <span slot="title">
                            <a-icon type="profile" theme="filled"/>订单管理
                        </span>
                        <a-menu-item key="AddOrder">
                            <a-icon type="plus-circle"/>创建订单
                        </a-menu-item>
                        <a-menu-item key="OrderList">
                            <a-icon type="profile"/>订单列表
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="product">
                        <span slot="title">
                            <a-icon type="hourglass" theme="filled"/>商品管理
                        </span>
                        <a-menu-item key="AddProduct">
                            <a-icon type="plus-circle"/>添加商品
                        </a-menu-item>
                        <a-menu-item key="ProductList">
                            <a-icon type="profile"/>商品列表
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="data" v-if="isAdmin">
                        <span slot="title">
                            <a-icon type="database" theme="filled"/>数据管理
                        </span>
                        <a-menu-item key="ExportData">
                            <a-icon type="logout"/>数据备份
                        </a-menu-item>
                        <a-menu-item key="ImportData">
                            <a-icon type="login"/>数据恢复
                        </a-menu-item>
                        <a-menu-item key="Ftp">
                            <a-icon type="upload"/>FTP备份
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <a-layout-content :style="{ flex:'none', margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '92vh' }">
                    <router-view></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-locale-provider>
</template>
<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import { Icon } from 'ant-design-vue';
import { mapGetters } from 'vuex';
import { ipcRenderer } from 'electron';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
    data() {
        return {
            zh_CN,
            currentRoute: ['Home']
        };
    },
    methods: {
        onMenuItemClick(item) {
            this.$router.replace({
                name: item.key
            });
        }
    },
    created() {
        ipcRenderer.on('onExit', () => {
            this.$confirm({
                okText: '退出',
                cancelText: '取消',
                title: '确定要退出吗？',
                onOk: () => {
                    if (this.autoSaveConfig.saveOnExit) {
                        this.$store.dispatch('saveOnExit').then(() => {
                            ipcRenderer.send('confirmToExit');
                        });
                    } else {
                        ipcRenderer.send('confirmToExit');
                    }
                }
            });
        });
        this.$store.dispatch('initUsers');
        this.$store.dispatch('initProducts');
        this.$store.dispatch('initOrders');
    },
    computed: {
        ...mapGetters(['users', 'isAdmin', 'autoSaveConfig'])
    },
    watch: {
        $route(to, from) {
            this.currentRoute = [to.name];
        }
    }
};
</script>

<style lang="stylus">
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    width: 100vw;

    .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .trigger:hover {
        color: #1890ff;
    }

    .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }
}
</style>
